<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>    
        html,body{
            height: 100%;
            overflow: hidden;
            background-color: lightgoldenrodyellow;
        }
        #box{
            font-family: 'Helvetica';
            font-size: 460px;
            text-align: center;
            color: lightseagreen;
            font-weight: 500;
        }
        .box{
            position: absolute;
            left: 0;
            bottom: 20px;
            width: 100%;
            text-align: center;
            
        }
        button{
            font-size: 28px;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div id="box">
     0
    </div>
    <div class="box">
        <button onclick="a()">加</button>
        <button onclick="b()">减</button>
        <button onclick="c()">清零</button>
        <button onclick="play()">语音</button>
    </div>
    <script>
    var m = 0;
    document.onkeyup = function(e){
        var n = e.keyCode;
        if(n==40){
            a()
        }
        if(n==38){
            b()
        }
    }

    function a(){
        m++;
        if(m>9) m=9;
        document.getElementById("box").innerHTML = m;
    }
    function b(){
        m--;
        if(m<0) m=0;
        document.getElementById("box").innerHTML = m;
    }
    function c(){
        m=0;
        document.getElementById("box").innerHTML = m;
    }


    //文字转语音
    function play() {
        var speech = new SpeechSynthesisUtterance();
        // 设置朗读内容和属性
        speech.lang = "zh";
        // speech.lang = "en";
        var text = document.getElementById("box").innerHTML;
        // speech.text = "您有新的消息";//播放文本
        speech.text = text;  //播放文本
        speech.volume = 9;   //播放音量
        speech.rate = 1;     //播放语速
        speech.pitch = 10;   //音调高低
        window.speechSynthesis.speak(speech);
    }
    </script>
</body>
</html>